<!DOCTYPE html>
<html  data-layout-decorate="~{fragment/layout}">
<head>
<meta charset="UTF-8">
<title>计算考核成绩</title>
<script type="text/javascript">
$(function(){
	/* $('#mytable').bootstrapTable({
		sidePagination: "server",
		url : '/table/page'
	}); */
    var data =  {
	    tableParams : {
	    	//toolbar: '#toolbar',  //工具栏的ID
	    	sortName:'test.testDate',
	    	sortOrder:'desc',
	    	showRefresh:false,
	    	url : 'page'
	    	},
	    	urls : {
	    		delete : 'delete',
	    		update : 'edit',
	    		add : 'edit',
	    		search:'search'
	    	},
	    	queryCondition : {
	    		testId : '',
	    		classId : ''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('image_table_div'));	
	
});
function typeformatter(value,row,index){
	return value==null?'':value.name;
}
function testDateformatter(value,row,index){
	return value==null?'':value.testDate;
}
function urlformatter(value,row,index){
	return value==null?'':'<a href="'+value+'"  target="_blank">'+value+'</a>';
}
function czformatter(value,row,index){
	return '<input type="text" name="title"  class="form-control" value="'+(value==null?'':value)+'"  placeholder="评分" onkeydown="return gradekeydown(event,this)" onchange="gradeChange(this,this.value,'+row.id+')">';
}
function gradekeydown(e,obj){
	var keynum;
	var keychar;
	var numcheck;

	if(window.event){ 	// IE
	  keynum = e.keyCode;
	}
	else if(e.which) 	// Netscape/Firefox/Opera
	{
	  keynum = e.which;
	}
	//alert(keynum);
	keychar = String.fromCharCode(keynum);
	numcheck = /\d/;
	if(numcheck.test(keychar)||keynum==46||keynum==8){
		$(obj).css('color','red');
	}else if(keynum==9||keynum==13||keynum==17||keynum==18||keynum==37||keynum==39){
		return true;
	}else{
		return false;
	}
	
}
function gradeChange(obj,value,id){
	var $this=$(obj);
	var x=/^\d+$/;
	if(!x.test(value)){
		bootbox.alert(value+' 不是一个合法的整数');
		return;
	}
	$.post('gradeChange',{id:id,grade:value},function(data){
		$this.css("color","blue");
	});
}

</script>
</head>
<body>
	<section data-layout-fragment="content">
	<div id="image_table_div" class="container">
	
		<!-- 查询窗口 -->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	                    <div class="form-group">
	                        <label for="search_testId">考核名称</label>
	                        <select id="search_testId" class="form-control" name="testId" data-bind="value:queryCondition.testId">
	                        	<option value="">请选择</option>
	                        	<option data-th-each="test:${tests}" data-th-value="${test.id}" data-th-text="${test.name}"></option>
	                        </select>
	                    </div>
	                    <div class="form-group">
	                        <label for="search_classId">考核班级</label>
	                        <select id="search_classId" class="form-control" name="classId" data-bind="value:queryCondition.classId">
	                        	<option value="">请选择</option>
	                        	<option data-th-each="bj:${classes}" data-th-value="${bj.id}" data-th-text="${bj.name}"></option>
	                        </select>
	                    </div>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button" class="btn btn-primary" data-dismiss="modal" data-bind="click:queryClick"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;重新计算分数</button>
		                <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click:clearClick"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空</button>
	            	</div>
                </div>
                
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button data-bind="click:searchClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>选择考核名称和班级
			</button>
		</div>
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<th data-checkbox="true" data-valign="middle"></th>
					<!-- <th data-field="id" data-visible="false">ID</th> -->
					<th data-field="className">班级</th>
					<th data-field="testName">考核名称</th>
					<th data-field="testDate">考核时间</th>
					<th data-field="studentName">学生</th>
					<th data-field="userName" data-visible="false">登录名</th>
					<th data-field="pwd" data-visible="false">密码</th>
					<th data-field="projectUrl" data-formatter="urlformatter"  data-visible="false">项目地址</th>
					<th data-field="grade" data-formatter="czformatter" >成绩</th>
				</tr>
			</thead>
		</table>
	</div>
	</section>
</body>
</html>